<template>
    <div>
        <div class="header-img">
            <img src="../../../assets/images/header1.jpeg">
        </div>
        <yd-cell-group>

            <yd-cell-item>
                <span slot="left">姓名：</span>
                <yd-input slot="right" max="4" type="text" required v-model="formItem.name"
                          placeholder="请输入姓名"></yd-input>
            </yd-cell-item>

            <yd-cell-item>
                <span slot="left">手机号：</span>
                <yd-input slot="right" type="number" ref="mobile" required regex="mobile" v-model="formItem.mobile"
                          placeholder="请输入手机号"></yd-input>
            </yd-cell-item>

            <yd-cell-item arrow type="label">
                <span slot="left">证件类型：</span>
                <select slot="right" v-model="formItem.type" @change="typeChangeAction">
                    <option value="1">身份证</option>
                    <option value="3">军官证</option>
                    <option value="2">护照</option>
                </select>
            </yd-cell-item>

            <yd-cell-item>
                <span slot="left">{{ cardTitle }}：</span>
                <input slot="right" v-model="formItem.idcard" type="text" placeholder="请输入证件号">
            </yd-cell-item>

            <div @click="run">
                <yd-cell-item arrow type="a">
                    <yd-icon slot="icon" name="verifycode" size=".42rem"></yd-icon>
                    <span slot="left">请选择网点</span>
                    <span slot="right">{{ formItem.shopName }}</span>
                </yd-cell-item>
            </div>

        </yd-cell-group>
        <div class="wl-button">
            <div class="save-data">
                <yd-button size="small" type="primary" class="save-btn" @click.native="saveForm">信息保存</yd-button>
            </div>
            <yd-button size="large" type="danger" class="btn" @click.native="checkForm" :loading="loading">预约购买
            </yd-button>
        </div>
    </div>
</template>

<script>
import { createOrder, getUserInfo } from '@/api/kouzhao'
import { isSubscribe } from '@/api/wx-api'

export default {
  data () {
    return {
      formItem: {
        mobile: '',
        idcard: '',
        type: '1',
        shopId: '',
        shopName: '',
        address: '',
        name: '',
        catId: ''
      },
      cardTitle: '身份证',
      loading: false
    }
  },
  methods: {
    run () {
      this.$router.push({
        name: 'shopList',
        params: this.formItem
      })
    },
    checkForm () {
      const v_mobile = this.$refs.mobile
      if (v_mobile.valid !== true) {
        this.$dialog.alert({ mes: '手机号不正确' })
        return false
      }

      if (!this.formItem.type) {
        this.$dialog.alert({ mes: '请选择证件类型' })
        return false
      }

      if (this.formItem.type === '1' && !this.$common.identityCodeValid(this.formItem.idcard)) {
        this.$dialog.alert({ mes: '身份证号码错误' })
        return false
      }

      this.userCreateOrder()
    },
    userCreateOrder () {
      this.loading = true
      createOrder(this.formItem).then(ret => {
        this.loading = false
        let result = ret.data
        if (result.errcode === 1001) {
          this.$dialog.confirm({
            title: '预约成功',
            mes: '<div>请您“明日”携带预约的有效证件，在预约购买时间内到“' + this.formItem.shopName + '”（地址：' + this.formItem.address + '）购买，过期作废。</div>',
            opts: () => {

            }
          })
        } else {
          this.$dialog.alert({ mes: result.errmsg })
        }
      })
    },
    saveForm () {
      window.localStorage.setItem('formdata', JSON.stringify(this.formItem))
      this.$dialog.toast({ mes: '保存成功' })
    },
    typeChangeAction () {
      if (this.formItem.type === '2') {
        this.cardTitle = '护照'
      }
      if (this.formItem.type === '3') {
        this.cardTitle = '军官证'
      }
      if (this.formItem.type === '1') {
        this.cardTitle = '身份证'
      }
    }
  },
  mounted () {
    if (!this.$common.xeUtils.isEmpty(this.$route.params)) {
      this.formItem = this.$route.params
    } else {
      if (window.localStorage.getItem('formdata')) {
        this.formItem = JSON.parse(window.localStorage.getItem('formdata'))
      }
    }
    getUserInfo().then(ret => {
      isSubscribe().then(ret => {
        if (ret.data.errcode !== 1001) {
          this.$router.push({ name: 'guanZhu' })
        }
      }).catch(e => {
        // this.$router.push({ name: 'guanZhu' })
      })
    })
    // this.$dialog.alert({ mes: '目前系统处于测试阶段，所有数据都会清除！' })
  }
}
</script>

<style scoped>
    .wl-button {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .wl-button .btn {
        width: 90%;
    }

    .header-img {
        width: 100%;
    }

    .header-img img {
        width: 100%;
    }

    .save-data {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .save-btn {
        margin-right: .4rem;
    }
</style>
